<template>
  <div class="home-layout">
    <el-container style="height: 100%;">
      <el-header class='header'>
        <!-- 头部内容 -->
        <div class="left">
          <div class="btn" @click.stop="toggleCollapse">
            <el-icon>
              <Menu/>
            </el-icon>
          </div>
          <div class="title">后台管理</div>
        </div>
        <div class="avatar">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-avatar src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"></el-avatar>
              <span class="nickname">
                {{ nickname }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click.stop="cancellation">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="main">
        <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            active-text-color="#ffd04b"
            background-color="#373c44"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
        >
          <template v-for="item in menu" :key="item.index">
            <template v-if="item.type==='item'">
              <el-menu-item :index="item.index">
                <el-icon>
                  <component :is="item.icon"/>
                </el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </template>
            <template v-else-if="item.type==='sub'">
              <el-sub-menu :index="item.index">
                <template #title>
                  <el-icon>
                    <component :is="item.icon"/>
                  </el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <el-menu-item-group v-if="item.children">
                  <el-menu-item :index="child.index" v-for="child in item.children" :key="child.index">
                    {{ child.title }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </template>
          </template>
        </el-menu>
        <el-main class="main-container">
          <!-- 主体内容 -->
          <div class="main-content">
            <RouterView/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
import {useRoute, useRouter,RouterView} from "vue-router";
const router = useRouter()
// 是否折叠
const isCollapse = ref(false);
// 侧边菜单内容
const menu = ref([
  {
    index: '/',
    title: '首页',
    icon: 'HomeFilled',
    type: 'item'
  },
  {
    index: '2',
    title: '餐厅管理',
    icon: 'location',
    type: 'sub',
    children: [
      {
        index: 'restaurant',
        title: '餐厅列表'
      },
    ]
  },
  {
    index: '3',
    title: '菜品管理',
    icon: 'menu',
    type: 'sub',
    children: [
      {
        index: 'category',
        title: '菜品类别'
      },
      {
        index: 'dish',
        title: '菜品列表'
      },
    ]
  },
  {
    index: 'order',
    title: '订单管理',
    icon: 'document',
    type: 'item',
  },
  {
    index: 'user',
    title: '用户管理',
    icon: 'user',
    type: 'item',
  }
])
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}
//切换折叠模式
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
// 用户信息
const nickname =computed(() => {
  const nickname = sessionStorage.getItem('nickname') || 'admin'
  return nickname
})
// 注销
const cancellation = () => {
  sessionStorage.clear()
  router.push('/login')
}
</script>

<style scoped lang="scss">
.home-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .btn {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }

    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-dropdown-link {
        display: flex;
        align-items: center;
        justify-content: center;

        .el-avatar {
          margin-right: 5px;
        }

        .el-icon {
          margin-left: 5px;
        }
      }
      .nickname{
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
    }

  }

  .main {
    height: calc(100% - 60px);
    overflow: hidden;
  }

  .main-container {
    padding: 20px;
    overflow: auto;
    background-color: #F0F0F0;

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-track {
      background-color: #F0F0F0;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px; // 滑块圆角
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgba(222, 3, 3, 0.54); // 鼠标移入滑块变红
    }
  }

  .main-content {
    margin: 0 auto;
    height: 90%;
    min-height: 950px;
    width: 1200px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ebeef5;
  }
}
</style>
